<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>添加候选人</title>
	<link rel="stylesheet" href="../css/jquery.ui.core.css" />
	<link rel="stylesheet" href="../css/jquery.ui.datepicker.css" />
	<link rel="stylesheet" href="../css/jquery.ui.theme.css" />
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/jquery.validity.css" />
	<style type="text/css">
		body{
			background-image: url("../img/batthern.png");
		}
	</style>
</head>
<body>
	<%@ include file="include/top.jsp" %>

	<div class="container" style="margin-top: 60px;">
		<div class="row">
			<jsp:include page="include/left.jsp">
				<jsp:param value="addcandidate" name="tag"/>
			</jsp:include>
			<div class="span9">
				<div class="wall" style="min-height: 400px;" id="right">
				<h3>基本信息</h3>
					<hr />
					<div class="well">
					<div id="seeimg" style="display: none;">
						头像预览：<img width="100px" height="100px" src="" alt="" id="heraderimg"/><br/>
						图像名称：<span id="imgname"></span>
					</div>
					   <form id="uploadimg" class="form-inline" action="uploadimg.jspx" method="post" enctype="multipart/form-data" target="upload-iframe">
				  		<label>上传头像:</label>&nbsp;<input type="file" name="file" id="file"/>
				  		<input class="btn" type="submit" value="上传" id="ok" title="头像"/>
  				</form>
  				<iframe id="upload-iframe" name="upload-iframe" width= "0" height= "0" frameborder= "0"></iframe>
  				</div>

  				<div class="well">
				    <form id="info" class="form-horizontal" method="post" action="javascript:;">
					    <fieldset>
					    <div class="control-group">
					    <label class="control-label" for="input01">学号</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input01" title="学号"/>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input02">姓名</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input02" title="姓名"/>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input03">性别</label>
					    <div class="controls">
					    <label class="radio inline">
					    	男<input type="radio" name="sex" id="radio1" value="1"/>
					    </label>
					    <label class="radio inline">
					    	女<input type="radio" name="sex" id="radio2" value="0" title="性别"/>
					    </label>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input04">出生日期</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input04" title="出生日期"/>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input05">民族</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input05" title="民族"/>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input06">政治面貌</label>
					    <div class="controls">
					    <select class="span3" id="input06" title="政治面貌">
					    	<option value="0">请选择</option>
			                <option value="1">党员</option>
			                <option value="2">预备党员</option>
			                <option value="3">团员</option>
			                <option value="4">其他</option>
		              	</select>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input07">学院</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input07" title="学院"/>
					    </div>
					    </div>

					    <div class="control-group">
					    <label class="control-label" for="input08">专业班级</label>
					    <div class="controls">
					    <input type="text" class="input-xlarge" id="input08" title="专业班级"/>
					    </div>
					    </div>
					    
					    </fieldset>
				    </form>
				    </div>
				    <div class="form-actions">
							<button class="btn btn-primary span2" id="next" style="margin-left: 180px;">下一步</button>
					</div>
  				</div>
  			</div>
		</div>
		<%@ include file="include/footer.jsp" %>
	</div>
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/welcome.js"></script>
	<script src="../js/jquery.validity.js"></script>
	<script charset="utf-8" src="../js/jquery.validity.lang.zh.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
	<script type="text/javascript">
	$(function() {
		$("#input04").datepicker({
			changeMonth: true,
			changeYear: true,
			altFormat: "yy-mm-dd",
			yearRange: "1980:2010"
		});
	});
	
	$(function() {
		$.welcome($("#welcome"));
	    var path,
	        clip = $("img"),
	        FileReader = window.FileReader,
	        imgName;
	    var imgUrl;
	    $("#file").change(function() {
	 
	        if (FileReader) {
	            var reader = new FileReader(),
	                file = this.files[0];
	            reader.onload = function(e) {
	                clip.attr("src", e.target.result);
	            };
	            reader.readAsDataURL(file);
	        } else {
	            path = $(this).val();
	            if (/"\w\W"/.test(path)) {
	                path = path.slice(1,-1);
	            }
	            alert(path);
	            clip.attr("src",path);
	            alert(clip[0].src);
	        }
	        $("#seeimg").show();
	        imgName = $(this).val();
	        $("#imgname").text(imgName);
	    });
	    
	    var sex;
	    $(":radio").click(function() {
	    	sex = $(this).val().trim();
	    });
	    
		var result;
		$("#info").validity(function() {
			$("#input01").require().match(/^\d{12}$/, "请输入12位的有效学号！");
			$("#input02").require().maxLength(20);
			$("#input04").require().match("date").range(new Date("1980-01-01"), new Date("2000-12-31"), "日期不正确！");
			$("#input05").require();
			$("#input06").require().greaterThan(0, "必须选择一个！");
			$("#input07").require();
			$("#input08").require();
			
			var sex1 = $("#radio1").attr("checked");
			var sex2 = $("#radio2").attr("checked");
			
			$("#radio2").assert(sex1 || sex2, "必须选择一个！");
			
			var img1 = false;
			var img2 = false;
			var img3 = false;
			var img4 = false;
			if(imgName) {
				if(imgName.substring(0, imgName.indexOf(".")) == $("#input01").val()) {
					img1 = true;
				}
				
				img2 = true;
			}
			
			imgUrl = $("#upload-iframe").contents().find("#msg").text();
			if(imgUrl) {
				if(imgUrl.indexOf(imgName) != -1) {
					img3 = true;
				}
				
				img4 = true;
			}
			$("#ok").assert(img2, "请选择候选人头像!").assert(img4, "请上传候选人头像！").assert(img1 && img3, "头像名称与学号不一致，请检查！");
			
			result = $.validity.end().valid;
		});
		
		$("#next").click(function() {
			$("#info").submit();
			
			if(result) {
				$.ajax({
					url : 'insertcandidate.jspx',
					type : 'POST',
					data : {
						name : $("#input02").val().trim(),
						studentid : $("#input01").val().trim(),
						sex : sex,
						nation : $("#input05").val().trim(),
						birthday : $("#input04").val().trim(),
						college : $("#input07").val().trim(),
						major : $("#input08").val().trim(),
						politics : $("#input06").val().trim(),
						sites : imgUrl
					},
					success : function(msg) {
						if(msg == 1) {
								window.location.href = "addcandidatesites.jspx";
							} else if(msg == 2) {
								alert("标题和内容不能为空！");
							} else if(msg == -1) {
								alert("该候选人信息已存在！");
							} else {
								alert("服务器忙，请稍后再试...");
							}
					}
				});
			}
		});

	});
</script>
</body>
</html>